<template>
	<view class="dialog-list">
		<view class="list-container" scroll-y :show-scrollbar="false">
			<view v-for="(chatKey, index) in chatList" :key="chatKey" class="dialog-item"
				:class="{ active: chatKey === currectChat }" @click="switchChat(chatKey)">
				<view class="item-header">
					<text class="title">对话 {{ index + 1 }}</text>
					<text class="time">{{ formatTime(getChatInfo(chatKey)?.lastActive) }}</text>
				</view>
				<text class="preview">{{ getPreviewContent(chatKey) }}</text>
			</view>
			<view v-if="chatList.length === 0" class="empty-tips">
				<!-- <text>暂无对话，点击创建新聊天</text> -->
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { defineProps, defineEmits } from 'vue';
	import { storeToRefs } from 'pinia';
	import ThemeColorUtil from "@/jzutils/ThemeColorUtil";
	import ThemeLangUtil from "@/jzutils/ThemeLangUtil";
	import dayjs from 'dayjs'; // 添加日期库

	const themeStore = ThemeColorUtil.useThemeStore();
	const langStore = ThemeLangUtil.useLangStore();
	const { themeData } = storeToRefs(themeStore);
	const { langData } = storeToRefs(langStore);

	const emit = defineEmits(['switch-chat']);

	const props = defineProps({
		currectChat: String,
		chatList: {
			type: Array,
			default: () => []
		}
	});

	// 获取对话信息（添加类型校验）
	const getChatInfo = (key : string) => {
		const rawData = uni.getStorageSync(key);


		// 兼容旧数据格式（如果是对象直接使用）
		const data = typeof rawData === 'string' ?
			JSON.parse(rawData) :
			rawData;

		return {
			messages: data?.messages || [],
			lastActive: data?.lastActive || null,
			createdAt: data?.createdAt || new Date().toISOString()
		};
	};

	// 格式化时间显示（使用dayjs）
	const formatTime = (timestamp ?: number | null) => {
		if (!timestamp) return '';
		return dayjs(timestamp).format('MM/DD HH:mm');
	};

	// 获取消息预览（添加安全校验）
	const getPreviewContent = (key : string) => {
		const { messages } = getChatInfo(key);
		console.log(messages)
		const lastMsg = messages[messages.length - 1];

		if (!lastMsg?.content) return '暂无对话';
		return lastMsg.content.substring(0, 20) + (lastMsg.content.length > 20 ? '...' : '');
	};

	const switchChat = (key : string) => {
		emit('switch-chat', key);
	};
</script>

<style scoped lang="scss">
	@import "/dam_uni_frame/styles/dam_theme_common.scss";
	@import "/static/css/iconfont.css";

	.dialog-list {
		height: 100vh;
		background: linear-gradient(135deg, #ffffff 0%, #f5f7fa 100%);
		padding: 15px;

		.list-container {
			height: calc(100% - 60px);
		}

		.dialog-item {
			background: white;
			border-radius: 12px;
			padding: 15px;
			margin-bottom: 15px;
			transition: all 0.3s ease;
			border: 1px solid rgba(154, 205, 255, 0.5);
			box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);

			&.active {
				background: linear-gradient(135deg, #d2e6ff, #9acdff);
				border-left: 4px solid #3c9cff;
				box-shadow: 0 5px 15px rgba(60, 156, 255, 0.2);
			}

			&:active {
				transform: scale(0.98) translateY(-2px);
				box-shadow: 0 8px 20px rgba(60, 156, 255, 0.15);
			}

			.item-header {
				display: flex;
				justify-content: space-between;
				margin-bottom: 10px;

				.title {
					font-weight: bold;
					color: #1b1b1b;
					position: relative;
					padding-bottom: 5px;

					&::after {
						content: '';
						position: absolute;
						bottom: 0;
						left: 0;
						width: 20px;
						height: 2px;
						background: linear-gradient(90deg, #22c4ff, #2196f3);
						border-radius: 2px;
					}
				}

				.time {
					font-size: 12px;
					color: #83868b;
					background: rgba(236, 237, 243, 0.5);
					padding: 2px 8px;
					border-radius: 10px;
				}
			}

			.preview {
				font-size: 13px;
				color: #1b1b1b;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
			}
		}

		.empty-tips {
			text-align: center;
			color: #cdcdcd;
			padding: 20px;
		}
	}
</style>